<template>
  <div class="new-purchase-layout">
    <crumbList :navList="navList"></crumbList>
    <div class="new-layout">
      <div class="new-content">
        <el-form :model="newBuild" :rules="newRules" ref="newBuild" label-width="110px" class="demo-ruleForm">
          <h2 class="new-ititle">1.基本信息</h2>
          <el-form-item label="城市" prop="cityName">
            <el-select v-model="newBuild.cityName" placeholder="请选择" class="w280" disabled>
              <el-option :label="item.cityName" :key="index" :value="item.cityName"
                         v-for="(item,index) in cityMsg"></el-option>
            </el-select>
          </el-form-item>
          <div class="new-oneline clearfix">
            <el-form-item label="厂商" prop="factoryName" class="mr fl">
              <el-select v-model="newBuild.factoryName" placeholder="请选择" class="w280" disabled>
                <el-option :label="item.factoryName" :key="index" :value="item.factoryName"
                           v-for="(item,index) in factoryMsg"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称" prop="machineName" class="fl">
              <el-select v-model="newBuild.machineName" placeholder="请选择" class="w280" :disabled="toCheck">
                <el-option :label="item.productName" :key="index" :value="item.productName"
                           v-for="(item,index) in productMsg"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <h2 class="new-ititle">2.回收详情</h2>
          <div class="new-oneline clearfix">
            <el-form-item label="机具固号" prop="fixedNumber" class="mr fl">
              <el-input v-model="newBuild.fixedNumber" placeholder="请输入" class="w280"
                        :disabled="toCheck||toChange"></el-input>
            </el-form-item>
            <el-form-item label="报修人" prop="repairMan" class="fl">
              <el-input v-model="newBuild.repairMan" placeholder="交接人" :disabled="toCheck"></el-input>
            </el-form-item>
          </div>
          <div class="new-oneline clearfix">
            <el-form-item label="报修原因" prop="repairReason" class="mr fl">
              <el-select v-model="newBuild.repairReason" placeholder="请选择" class="w280" :disabled="toCheck">
                <el-option :label="item.repairReason" :key="index" :value="item.repairReason"
                           v-for="(item,index) in repairMsg"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系方式" prop="mobile" class="fl">
              <el-input v-model="newBuild.mobile" placeholder="请输入" :disabled="toCheck"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="备注" prop="repairRemark">
            <el-input type="textarea" v-model="newBuild.repairRemark" class="w280 h120" placeholder="请输入"
                      :disabled="toCheck"></el-input>
          </el-form-item>
          <div class="new-check" v-if="toCheck">
            <h2 class="new-ititle">3.报修核实</h2>
            <div class="new-oneline clearfix">
              <el-form-item label="情况是否核实" prop="isChecked" class="mr fl">
                <el-select v-model="newBuild.isChecked" placeholder="请选择" class="w280">
                  <el-option label="未核实" value="0"></el-option>
                  <el-option label="已核实" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="核实人" prop="checkMan" class="fl">
                <el-input v-model="newBuild.checkMan" placeholder="交接人"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="处理方式" prop="handleMethod">
              <el-select v-model="newBuild.handleMethod" placeholder="请选择" class="w280">
                <el-option label="返厂" value="返厂"></el-option>
                <el-option label="维修" value="维修"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="处理结果" prop="handleResult">
              <el-select v-model="newBuild.handleResult" placeholder="请选择" class="w280">
                <el-option label="返厂" value="返厂"></el-option>
                <el-option label="维修" value="维修"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="checkRemark">
              <el-input type="textarea" v-model="newBuild.checkRemark" class="w280 h120" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <el-form-item class="new-submit">
            <el-button class="new-btn-no buleSpaceBtn" @click="resetForm">取消</el-button>
            <el-button class="new-btn-ok buleBtn" @click="submitForm('newBuild')">完成</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import crumbList from '../../common/crumbList.vue'
  import ajax from '../../../utils/ajax/index'
  import getParam from '../../../utils/getParams/getParams'
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        navList: [
          {name: '项目详情', path: ''},
          {name: '机具维护', path: 'maintain'},
          {
            name: JSON.parse(sessionStorage.getItem('projectItemData')).name,
            path: 'maintainList?id=' + getParam('id')
          },
          {
            name: '新增维护信息',
            path: 'newMaintain?id=' + getParam('id')
          }
        ],
        newBuild: {
          cityName: JSON.parse(sessionStorage.getItem('projectItemData')).cityName,
          factoryName: JSON.parse(sessionStorage.getItem('projectItemData')).factoryName,
          machineName: '',
          fixedNumber: '',
          repairMan: '',
          repairReason: '',
          mobile: '',
          repairRemark: '',
          isChecked: '',
          checkMan: '',
          handleMethod: '',
          handleResult: '',
          checkRemark: ''
        },
        newRules: {
          cityName: [
            {required: true, message: '请选择城市', trigger: 'change'}
          ],
          factoryName: [
            {required: true, message: '请选择厂商', trigger: 'change'}
          ],
          machineName: [
            {required: true, message: '请选择产品名称', trigger: 'change'}
          ],
          fixedNumber: [
            {required: true, message: '请输入机具固号', trigger: 'blur'}
          ],
          repairMan: [
            {required: true, message: '请输入维修人', trigger: 'blur'}
          ],
          repairReason: [
            {required: true, message: '请输入报修原因', trigger: 'change'}
          ],
          mobile: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {len: 11, message: '请填写11位数字', trigger: 'blur'}
          ],
          repairRemark: [
            {required: true, message: '请输入备注', trigger: 'blur'}
          ]
        },
        toCheck: false,
        toChange: false
      }
    },
    computed: {
      ...mapState(['cityMsg', 'factoryMsg', 'productMsg', 'repairMsg'])
    },
    components: {crumbList},
    created () {
      let itemData = JSON.parse(sessionStorage.getItem('maintain'))
      if (itemData) {
        this.navList[3].name = '核实维护信息'
        if (!itemData.isChecked) {
          itemData.isChecked = ''
        }
        if (itemData.isChecked === '未核实') {
          itemData.isChecked = '0'
        } else if (itemData.isChecked === '已核实') {
          itemData.isChecked = '1'
        }
        if (!itemData.handleMethod) {
          itemData.handleMethod = ''
        }
        if (!itemData.handleResult) {
          itemData.handleResult = ''
        }
        if (!itemData.checkMan) {
          itemData.checkMan = ''
        }
        if (!itemData.checkRemark) {
          itemData.checkRemark = ''
        }
        this.newBuild = itemData
        this.toCheck = true
      }
      let itemData2 = JSON.parse(sessionStorage.getItem('maintainChange'))
      if (itemData2) {
        this.navList[3].name = '修改维护信息'
        if (!itemData2.isChecked) {
          itemData2.isChecked = ''
        }
        if (itemData2.isChecked === '未核实') {
          itemData2.isChecked = '0'
        } else if (itemData2.isChecked === '已核实') {
          itemData2.isChecked = '1'
        }
        if (!itemData2.handleMethod) {
          itemData2.handleMethod = ''
        }
        if (!itemData2.handleResult) {
          itemData2.handleResult = ''
        }
        if (!itemData2.checkMan) {
          itemData2.checkMan = ''
        }
        if (!itemData2.checkRemark) {
          itemData2.checkRemark = ''
        }
        this.newBuild = itemData2
        this.toChange = true
      }
    },
    methods: {
      // 重置数据
      resetForm () {
        this.$router.push('/maintainList?id=' + getParam('id'))
        /* let itemData = JSON.parse(sessionStorage.getItem('purchase'))
        if (itemData) {
          if (!itemData.isChecked) {
            itemData.isChecked = ''
          }
          if (itemData.isChecked === '未核实') {
            itemData.isChecked = '0'
          } else if (itemData.isChecked === '已核实') {
            itemData.isChecked = '1'
          }
          if (!itemData.handleMethod) {
            itemData.handleMethod = ''
          }
          if (!itemData.handleResult) {
            itemData.handleResult = ''
          }
          if (!itemData.checkMan) {
            itemData.checkMan = ''
          }
          if (!itemData.checkRemark) {
            itemData.checkRemark = ''
          }
          this.newBuild = itemData
          this.toCheck = true
        } else {
          this.newBuild = {
            cityName: '',
            factoryName: '',
            machineName: '',
            fixedNumber: '',
            repairMan: '',
            repairReason: '',
            mobile: '',
            repairRemark: '',
            isChecked: '',
            checkMan: '',
            handleMethod: '',
            handleResult: '',
            checkRemark: ''
          }
        } */
      },
      // 提交保存数据
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveNewData()
          } else {
            this.$message({message: '请填写相关信息！', type: 'warning'})
          }
        })
      },
      saveNewData () {
        let params = this.newBuild
        params.projectCode = getParam('id')
        let url
        let itemData = JSON.parse(sessionStorage.getItem('maintain'))
        let itemData2 = JSON.parse(sessionStorage.getItem('maintainChange'))
        if (itemData) {
          params.id = itemData.id
          url = this.api2.maintain.addCheckProjectData
        } else if (itemData2) {
          params.id = itemData2.id
          url = this.api2.maintain.addRepairProjectData
        } else {
          url = this.api2.maintain.addRepairProjectData
        }
        ajax.post(url, params).then((res) => {
          if (res.msg.code === '20000') {
            this.$message({message: res.msg.message, type: 'success'})
            this.$router.push('/maintainList?id=' + getParam('id'))
          } else {
            this.$message.error(res.msg.message)
          }
        })
      }
    }
  }
</script>
